<template>
  <div class="result-container">
    <el-alert v-if="result === 0" class="content"
      :title="$t('production.createProductSuccess')"
      type="success"
      description=""
      :closable="false"
      show-icon>
    </el-alert>
    <el-alert v-if="result !== 0" class="content"
      :title="$t('production.createProductSuccess')"
      type="error"
      description=""
      :closable="false"
      show-icon>
    </el-alert>
    <div class="button-box">
          <el-button 
            type="default" 
            @click.native.prevent="goToProductDetail">
            {{ $t('production.checkProductDetail') }}
          </el-button>  
       
          <el-button 
            type="primary" 
            @click.native.prevent="goToAddProduct">
            {{ $t('production.addMoreProduct') }}
          </el-button>  
    </div>
  </div>
</template>

<script>

export default {
  name: "createProductResult",
  data() {
    return {
      // 产品编辑结果，0表示编辑成功
      result: parseInt(this.$route.query.code),
      // 产品id
      productId: this.$route.query.productId
    };
  },
  methods: {
    goToProductDetail() {
      this.$router.push({path:'/production/productDetail', query:{productId: this.productId}})
    },
    goToAddProduct() {
      this.$router.push({ path: 'addProduct' })
    }
  },
  computed: {}
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import '@/styles/variables.scss';
.result-container {
  max-width: 1000px;
  margin: 20px auto;
  .content {
    max-width: 600px;
    margin: 100px auto 50px auto;
  }
  .button-box {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
}
@media screen and (max-width: $sm){
  .result-container {
    margin: 20px;
  }
}
</style>

<style rel="stylesheet/scss" lang="scss">
.result-container {
  .el-alert__icon {
    font-size: 26px;
  }
  .el-alert__content {
    padding-left: 18px;
    .el-alert__title {
      font-size: 24px;
    }
  }
}
</style>
